<template>
  <el-popover
    popper-class="el_project"
    :placement="placement"
    width="200"
    trigger="click"
    @show="screen_popover_show()"
    @hide="screen_popover_hide()">
            <span v-if="reference=='01'" slot="reference" onselectstart='return false'
                  :class="jsonData.value_str?'pr box_cont cp':'pr box_cont cp color_gray'">
                <template v-if="jsonData.value_str">
                    <template v-if="jsonData.value_str.split(',').length>1">
                        {{jsonData.label_str.split(',')[0]}}...
                    </template>
                    <template v-else>
                        {{jsonData.label_str.split(',')[0]}}
                    </template>
                </template>
                <template v-else>
                    请选择
                </template>
                <img v-if="jsonData.value_str" @click="empty_sub()"
                     src="@/assets/images/tx_answer/accessRecord/3_30_qingchu_tiaojian.png"
                     title="移除该条件"/>
                <img v-if="!jsonData.value_str" src="@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png"
                     class="table_icon"
                     style="width:7px;height:5px;z-index:1;"
                     :class="[popover_flg=='show'?'popover_show_animate':'',popover_flg=='hide'?'popover_hide_animate':'']"/>
            </span>
    <span v-else-if="reference=='02'" slot="reference" onselectstart='return false'
          :class="jsonData.value_str?'pr box_cont cp color-bl':'pr box_cont cp'">
                <template v-if="jsonData.value_str">
                    <template v-if="jsonData.value_str.split(',').length>1">
                        {{jsonData.label_str.split(',')[0]}}...
                    </template>
                    <template v-else>
                        {{jsonData.label_str.split(',')[0]}}
                    </template>
                </template>
                <template v-else>
                    {{jsonList.filter_name}}
                </template>
                <img v-if="jsonData.value_str" @click="empty_sub()"
                     src="@/assets/images/tx_answer/accessRecord/3_30_qingchu_tiaojian.png"
                     title="移除该条件"/>
                <img v-if="!jsonData.value_str" src="@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png"
                     class="table_icon"
                     style="width:7px;height:5px;z-index:1;"
                     :class="[popover_flg=='show'?'popover_show_animate':'',popover_flg=='hide'?'popover_hide_animate':'']"/>
            </span>
    <div v-else style="cursor: pointer" slot="reference" class="table_th pr " :class="jsonData.value_str?'color-bl':''">
      {{jsonList.filter_name}}<img src="@/assets/images/tx_answer/accessRecord/xiala_sanjiao.png"
                                   class="table_icon"
                                   :class="[popover_flg=='show'?'popover_show_animate':'',popover_flg=='hide'?'popover_hide_animate':'']"/>
    </div>
    <div class="project_choose_box">
      <div class="project_choose_screen_box ">
        <input type="text" placeholder="输入关键字搜索" v-model="jsonData.screen_name" @keyup.enter="get_list()"/>
        <img src="@/assets/images/tx_answer/accessRecord/sousuo.png" @click="get_list()"/>
        <template v-if="jsonData.screen_name">
          <i title="清空" class="clear_input" style="right: 38px;" @click="jsonData.screen_name='',get_list()"></i>
          <i class="clear_input_icon" style="right: 31px;"></i>
        </template>
      </div>
      <ul v-loading="jsonData.loading" :class="jsonData.loading?'project_choose_loading':''">
        <li class="cf" @click="screen_all_select_click()" :class="jsonData.all_select_bl?'active':''">
          <span class="fl">全部</span>
          <i class="fr"></i>
        </li>
        <template v-for="(item,index) in jsonData.list">
          <li :class="item.check=='01'?'active cf':'cf'" @click="screen_choice_click(item)" :title="item.label">
            <span class="fl">{{item.label}}</span>
            <i class="fr"></i>
          </li>
        </template>
      </ul>
      <div class="save_choose_box">
        <a ondragstart="return false;" href="javascript:;" @click="screen_sub_click()">确定</a>
      </div>
    </div>
  </el-popover>
</template>
<script>
  import { getCommonData } from '@/api/tx_answer/common'

  var _this
  export default {
    name: 'CurrencyCheck',
    data() {
      return {
        authId: '',
        popover_model: false,
        popover_flg: '',

        jsonData:{
          list:[],
          all_list:[],
          screen_name:'',
          value_json:[],
          value_str:'',
          label_str:'',
          all_select_bl:false,
          loading:false,
        },
        keyup_settime: ''
      }
    },
    props: {
      //这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
      jsonList: {
        type: Object,//数据类型啊
        default: function() {//默认值
          return {}
        }
      },
      popoverClass: {//el-popover 的类
        type: String,//数据类型
        default: ''//默认值
      },
      reference: {//00 默认 只字变蓝  01 字段名/num  02展示多个搜索值 值1/值2/值3
        type: String,//数据类型
        default: '00'//默认值
      },
      valueJsonType: {//如果筛选确定值需要除了value和label以外的值，则以数组形式传key值
        type: Array,//数据类型
        default: function() {
          return []
        }
      },
      placement: {
        type: String,//数据类型
        default: 'bottom'//默认值
      }
    },
    created: function() { //html加载完成之前
      _this = this
      _this.authId = _this.$cache.session.get('authId')
      if (_this.jsonList.ajax_obj && _this.jsonList.ajax_obj.data) {
        _this.jsonList.ajax_obj.data.authId = _this.authId
      }
    },
    mounted: function() {
      this.jsonData.json_name = this.jsonList.json_name
      setTimeout(() => {//防止组件渲染过快，还未从缓存获取数据
        if (this.jsonList.data.value_str) {
          this.jsonData.value_str = this.jsonList.data.value_str
          if (this.jsonList.data.label_str) {//如果没有label 那就是value和label一致
            this.jsonData.label_str = this.jsonList.data.label_str
          } else {
            this.jsonData.label_str = this.jsonList.data.value_str
          }
          if (this.valueJsonType.length) {
            this.jsonData.value_json = this.jsonList.data.value_json
          }
        }
        if (this.jsonList.data.all_list && this.jsonList.data.all_list.length) {
          this.jsonData.all_list = this.jsonList.data.all_list
        }
        this.$emit('check_sub', this.jsonData)
      })
    },
    watch: {
      jsonList: {
        handler(newV, oldV) {
          this.set_jsonData_value()
        },
        immediate: true,
        deep: true
      },
      jsonData: {
        handler(newV, oldV) {
          if (newV.value_str == '' && this.popover_flg == 'hide') {
            setTimeout(() => {
              this.popover_flg = 'no'//取消动画class 不执行动画；
            }, 4)
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {

      //这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事件告诉父组件触发一个自定义事件，
      // $emit()方法第二个参数可以用来传递数据
      //筛选
      set_jsonData_value: function() {
        if (this.jsonList.data.value_str || this.jsonList.data.value_str == '') {
          this.jsonData.value_str = this.jsonList.data.value_str
          this.jsonData.label_str = this.jsonList.data.label_str
        }
      },
      screen_popover_show: function() {//浮窗显示事件
        this.set_jsonData_value()
        this.jsonData.list = []
        this.jsonData.screen_name = ''
        if (this.jsonData.list.length == 0) {
          this.get_list()
        } else {
          this.screen_show_item_check()
        }
        this.popover_flg = 'show'
      },
      screen_popover_hide: function() {
        this.popover_flg = 'hide'
      },
      screen_show_item_check: function() {
        // 回显列表已选中项目
        var arr = this.jsonData.list
        var value_arr = this.jsonData.value_str.split(',')
        arr.forEach(function(item) {
          item.check = '00'//取消所有项的选中状态
          if (value_arr.indexOf(item.value) != -1) {//如果这个id在已选中的数组里， 则这一项被选中
            item.check = '01'
          }
        })
        this.screen_trigger_all_select()
      },
      screen_choice_click: function(item) {//单个选择事件
        if (item.check == '00') {
          item.check = '01'
        } else if (item.check == '01') {
          item.check = '00'
        }
        this.screen_trigger_all_select()
      },
      screen_sub_click: function() {//筛选确定事件
        var arr = this.jsonData.list
        this.jsonData.value_str = ''
        this.jsonData.label_str = ''
        var value_arr = []
        var label_arr = []
        var value_json = []
        arr.forEach((item) => {
          if (item.check == '01') {
            value_arr.push(item.value)
            label_arr.push(item.label)
            if (this.valueJsonType.length) {
              value_json.push(item)
            }
          }
        })
        this.jsonData.value_str = value_arr.join(',')
        this.jsonData.label_str = label_arr.join(',')
        this.jsonData.value_json = value_json
        this.jsonData.get_list_flg = '01'
        this.$emit('check_sub', this.jsonData)
        if (this.reference != '01') {//如果是表格内筛选，则需要让表格上面的筛选进行回显
          this.$emit('top_screen_set_value', this.jsonList.json_name)
        }
        // this.search();
        // $('body').click();

      },
      empty_sub: function() {//清空筛选条件
        this.jsonData.get_list_flg = '01'
        this.jsonData.value_str = ''
        this.jsonData.label_str = ''
        this.$emit('check_sub', this.jsonData)

      },
      screen_all_select_click: function() {//全选事件
        var arr = this.jsonData.list
        var item_check = ''
        this.jsonData.all_select_bl = !this.jsonData.all_select_bl
        if (this.jsonData.all_select_bl) {
          item_check = '01'
        } else {
          item_check = '00'
        }
        arr.forEach(function(item) {
          item.check = item_check
        })
      },
      screen_trigger_all_select: function() {//判断是否全选
        var arr = this.jsonData.list
        var this_bl = true
        arr.forEach(function(item) {
          if (item.check == '00') {
            this_bl = false
          }
        })
        if (arr.length == 0) {
          this_bl = false
        }
        this.jsonData.all_select_bl = this_bl
      },
      get_list: function() {
        var list_this = this
        if (list_this.jsonList.data.all_list && list_this.jsonList.data.all_list.length) {
          list_this.jsonData.all_list = list_this.jsonList.data.all_list
        }
        if (list_this.jsonData.all_list.length) {//如果已经加载过
          if (list_this.jsonData.screen_name) {//如果是进行筛选
            list_this.jsonData.list = []
            list_this.jsonData.all_list.forEach(function(item) {
              if (item.label.indexOf(list_this.jsonData.screen_name) != -1) {
                list_this.jsonData.list.push(item)
              }
            })
          } else {
            list_this.jsonData.list = JSON.parse(JSON.stringify(list_this.jsonData.all_list))
          }
          list_this.screen_show_item_check()
        } else {
          if (list_this.jsonList.ajax_obj) {
            console.log(this.jsonList.ajax_obj.url)
            list_this.jsonData.loading = true
            var ajax_data = list_this.jsonList.ajax_obj.data
            if (list_this.jsonList.ajax_obj.screen_key) {
              ajax_data[list_this.jsonList.ajax_obj.screen_key] = list_this.jsonData.screen_name
            }
             console.log(list_this.jsonList.ajax_obj.url)
            getCommonData(list_this.jsonList.ajax_obj.url, ajax_data, list_this.jsonList.ajax_obj.type)
              .then(data => {
                if (data.success) {
                  console.log(data)
                  var data_list = []
                  if (list_this.jsonList.ajax_obj.data_data_name) {//指定data.data 下的list key名称
                    data_list = data.data[list_this.jsonList.ajax_obj.data_data_name]
                  } else {
                    data_list = (data.data.page && data.data.page.records) || data.data.list || data.data.HRlist || data.data.financeList || data.data.invithrUserList || data.data.registerUserList || data.data
                  }
                  var arr = []
                  for (var i = 0; i < data_list.length; i++) {
                    if (list_this.jsonList.ajax_obj.data_type == '00') {
                      var obj = { value: data_list[i], label: data_list[i], check: '00' }
                    } else if (list_this.jsonList.ajax_obj.data_type == '01') {
                      var obj = {
                        value: data_list[i][list_this.jsonList.ajax_obj.value_name],
                        label: data_list[i][list_this.jsonList.ajax_obj.label_name],
                        check: '00'
                      }
                    }
                    if (list_this.valueJsonType.length) {
                      list_this.valueJsonType.forEach(function(item) {
                        obj[item] = data_list[i][item]
                      })
                    }
                    arr.push(obj)
                  }
                  list_this.jsonData.list = arr
                  list_this.jsonData.all_list = JSON.parse(JSON.stringify(arr))
                  list_this.jsonData.loading = false
                  list_this.screen_show_item_check()
                  list_this.$emit('check_sub', list_this.jsonData)
                } else {
                  try {
                    _this.tips_show(data.msg)//调用父页面提示
                  } catch (err) {
                    try {
                      _this.tips_show(data.msg)//调用父页面提示
                    } catch (err) {
                      alert(data.msg)
                    }
                  }
                }
              })
          }
        }

      }
    }

  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .el_select_box{width:100%;padding:10px 0;background-color:#fff;}
  .el_select_box ul li{height:30px;line-height:30px;cursor:pointer;font-size: 12px;color: #354168;text-align:center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  .el_select_box ul li.active,.el_select_box ul li:hover{background-color:rgba(69,148,255,0.10);}
  .el_select_box ul{max-height:180px;overflow-y:auto;}
  .el_select_box ul::-webkit-scrollbar{width:8px;height:10px;background-color:rgba(0,0,0,0)}
  .el_select_box ul::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(0,0,0,.2);transition:all .4s ease;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;-o-transition:all .4s ease}
  .el_select_box ul::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1)}

  .color-bl{color: #4594FF}
  .text_hidden{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .staff_popover_span{
    display:flex;
    align-items:center;
  }
  /*组件样式*/
  /*多选框搜索框*/
  .project_choose_screen_box{
    margin: 0 16px;
    position: relative;
    border-bottom: 1px solid #eee;
    height: 32px;
  }
  .project_choose_screen_box input{
    border:0;
    background-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    padding-right: 32px;
  }
  .project_choose_screen_box img{
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    right:8px;
    top: 50%;
    margin-top: -8px;
  }
  /*多选列表*/
  .project_choose_box ul li{padding:0 16px;height:32px;cursor:pointer;}
  .project_choose_box ul li span,.all_staff_box ul li span{font-size: 12px;color: #21263F;line-height:32px;max-width:130px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}
  .project_choose_box ul li i{width: 14px;height: 14px;background: url(~@/assets/images/tx_answer/accessRecord/deputy_invalid.png) no-repeat center #fff;background-size: 14px 14px;margin-top:9px;}
  .project_choose_box ul li.active i{background: url(~@/assets/images/tx_answer/accessRecord/deputy_checked.png) no-repeat center #fff;background-size: 14px 14px;}
  .project_choose_box ul li.active span,.project_choose_box ul li:hover span{color: #4594FF;}
  .project_choose_box ul li.active,.project_choose_box ul li:hover{background: rgba(16,142,233,0.1);}
  .project_choose_box ul{max-height:160px;overflow-y:auto;}
  .project_choose_box ul.project_choose_loading{height:160px;}
  .project_choose_box_max_h ul{max-height: 160px;height: auto;}
  .save_choose_box{padding:9px 0;}
  .save_choose_box a{width:168px;height:32px;line-height:32px;text-align: center;background: #4594FF;border-radius: 2px;font-size: 12px;color: #FFFFFF;display:block;margin:0 auto;}
  .remark_title{border: 1px solid #EBEEF5 !important;box-shadow:0 0 10px 0 rgba(0,0,0,0.20) !important;max-width:200px;max-height:150px;color:#666;line-height:150%;text-align:justify;}
  .remark_title[x-placement^=bottom] .popper__arrow{border-bottom-color:#fff !important;}
  .sanjiao_icon {
    width: 16px;
    height: 8px;
    background-color: #fff;
    position: absolute;
    transform: rotate(
        45deg);
    top: -2px;
  }

  .popover_show_animate{
    animation: rotate180 0.5s forwards;
  }
  @keyframes rotate180 {
    from {transform: rotate(0deg);}
    to {transform: rotate(-180deg);}
  }
  .popover_hide_animate{
    animation: rotate0 0.5s forwards;
  }
  @keyframes rotate0 {
    from {transform: rotate(-180deg);}
    to {transform: rotate(0deg);}
  }
  /* 客户筛选样式 */
  /* 多选浮窗样式 */
  /* 搜索框 */
  .customer_popover_input{
    height: 30px;
    padding: 0 12px;
    position: relative;
  }
  .customer_popover_input input{
    border-bottom: 1px solid #EEEEEE;
    width: 100%;
    height: 100%;
  }
  .customer_popover_input img{
    width: 16px;
    height: 16px;
    position: absolute;
    right:20px;
    top: 50%;
    margin-top: -8px;
    cursor: pointer;
  }
  /*全选*/
  .popover_check_all_but{
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    cursor: pointer;
  }
  .popover_check_all_but:hover{
    background-color: #ECF4FF;
  }
  .popover_check_all_but.ative{
    background-color: #ECF4FF;
  }
  .popover_check_all_but>img{
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
  .popover_check_all_but>span{
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }

  .popover_check_box{
    font-size: 12px;
  }
  .popover_check_ul{
    max-height: 300px;
    overflow: auto;
  }
  .popover_check_ul li{
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    cursor: pointer;
  }
  .popover_check_ul li:hover{
    background-color: #ECF4FF;
  }
  .popover_check_ul li.ative{
    background-color: #ECF4FF;
  }
  .popover_check_ul li .check{
    display: none;
  }
  .popover_check_ul li.ative .no_check{
    display: none;
  }
  .popover_check_ul li.ative .check{
    display: inline-block;
  }
  .popover_check_ul li>img{
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
  .popover_check_ul li>span{
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }
  /*确定重置按钮*/
  .popover_check_but{
    border-top: 1px solid #eee;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .popover_check_but button{
    cursor: pointer;
  }
  .popover_check_but button:first-child{
    margin-right: 30px;
  }
</style>
